<template>
    <div class="infinite-scroll">
        <slot></slot>
        <div class="bottom" v-if="!isEmpty">
            <div v-if="finish" class="no-more flex">
                <el-divider content-position="center"> 没有更多内容了 </el-divider>
            </div>
            <div v-else class="loading flex">
                <el-icon class="is-loading"> <Loading /> </el-icon>加载更多...
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted, onUnmounted } from "vue";
import { Loading } from "@element-plus/icons-vue";
import { throttle } from "lodash";
import { onBeforeRouteLeave } from "vue-router";
const props = defineProps(["finish", "loading", "distance", "isEmpty", "scrollId"]);
const emit = defineEmits(["load"]);

const handleScroll = throttle(
    () => {
        // 如果父组件正在加载数据，不触发
        if (props.loading) return;
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
        if (props.scrollId) {
            scrollTop = document.getElementById(props?.scrollId)?.scrollTop || 0;
            windowHeight = document.getElementById(props?.scrollId)?.clientHeight || 0;
            scrollHeight = document.getElementById(props?.scrollId)?.scrollHeight || 0;
        }
        const remain = scrollHeight - scrollTop - windowHeight;
        if (remain <= props.distance && !props.finish) {
            emit("load");
        }
    },
    2000,
    { leading: true },
);
// 路由切换
onBeforeRouteLeave(() => {
    if (props.scrollId) {
        document.getElementById(props?.scrollId)?.removeEventListener("scroll", handleScroll);
    } else {
        window.removeEventListener("scroll", handleScroll);
    }
});
// 监听滚动条事件
onMounted(() => {
    emit("load");
    if (props.scrollId) {
        document.getElementById(props?.scrollId)?.addEventListener("scroll", handleScroll);
        return;
    }
    window.addEventListener("scroll", handleScroll);
});

// 销毁滚动条事件
onUnmounted(() => {
    if (props.scrollId) {
        document.getElementById(props?.scrollId)?.removeEventListener("scroll", handleScroll);
        return;
    }
    window.removeEventListener("scroll", handleScroll);
});
</script>

<style lang="scss" scoped>
.infinite-scroll {
    .bottom {
        overflow: hidden;
        display: flex;
        justify-content: center;
        .no-more {
            // background-color: RGB(246, 246, 249);
            justify-content: center;
            .el-divider--horizontal {
                display: block;
                height: 1px;
                width: 284px;
                border-top: 1px var(--el-border-color) var(--el-border-style);
            }
            :deep(.el-divider__text) {
                // background: RGB(246, 246, 249);
                width: 100px;
                padding: 0 24px;
                font-size: 14px;
                color: #c4c4c4;
                letter-spacing: 0;
                text-align: justify;
                font-weight: 400;
                // width: 98px;
            }
        }

        .loading {
            display: flex;
            gap: 10px;
            align-items: center;
            justify-content: center;
            margin: 20px;
            color: rgba(27, 24, 27, 0.7);
        }
    }
}
</style>
